<template>
	<view class="Global">


		<bgImage></bgImage>

		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>
		<searchInput :inputcontent="inputcontent" @sendData="getInputValue" ></searchInput>


		<view class="contentAll" id="main" @click="selectAllClick()">
			<text class="contentListItemLeftImgText" v-if="selectAll==false"></text>
			<image class="contentListItemLeftImg" v-if="selectAll==true" src="../../../static/xuanzhong.png"
				mode="scaleToFill"></image>

			<text class="contentListItemLeftText">全选</text>
		</view>

		<scroll-view scroll-y="true" class="contentScroll" :style="'height:'+scrollViewHeight+'px'">
			<view class="contentList">

				<view class="contentListItem" v-for="(item,index) in listData" @click="clickItem(item,index)">

					<view class="contentListItemLeft">
						<text class="contentListItemLeftImgText" v-if="item.select==false"></text>
						<image class="contentListItemLeftImg" v-if="item.select==true"
							src="../../../static/xuanzhong.png" mode="scaleToFill"></image>
						<image class="contentListItemLeftImgSecond" v-show="item.select==true"
							src="../../../static/clock/zhankai.png" mode="scaleToFill"></image>
						<image class="contentListItemLeftImgSecond" v-show="item.select==false"
							src="../../../static/clock/weizhankai.png" mode="scaleToFill"></image>
						<text class="contentListItemLeftText">{{item.name}}</text>
					</view>

					<view class="contentListItemRight">
						<image class="contentListItemRightImg" src="/static/clock/jiagou.png" mode="scaleToFill">
						</image>
					</view>

				</view>
			</view>


		</scroll-view>





		<text class="ContentButton" id="mainBottom">确定</text>

	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'

	import searchInput from '@/components/searchInput.vue'
	export default {
		components: {
			MyNav,
			bgImage,
			searchInput

		},
		data() {
			return {
				title: '添加考勤人员',
				isback: true,

				inputcontent: '公司名称',

				listData: [{
						name: '数值世界',
						select: false
					},
					{
						name: '数值世界',
						select: false
					},
					{
						name: '数值世界',
						select: false
					},
					{
						name: '数值世界1',
						select: false
					},
					{
						name: '数值世界',
						select: false
					},
					{
						name: '数值世界',
						select: false
					},
					{
						name: '数值世界',
						select: false
					},
					{
						name: '数值世界1',
						select: false
					},
					{
						name: '数值世界',
						select: false
					},
					{
						name: '数值世界',
						select: false
					},
					{
						name: '数值世界',
						select: false
					},
					{
						name: '数值世界12',
						select: false
					}
				],

				// 全选
				selectAll: false,

				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
				
				
				// 选择数量
				deviceSelectNum: 0,

			}
		},

		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data); 
				this.mainTop = data.top

				// console.log('1底部距离', this.mainTop);

				// 在其他页面或组件中访问
				// const app = getApp();
				// this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
				// 	.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();

			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);

				this.scrollViewHeight = this.bottomTop - this.mainTop - 40
				// console.log('可滚动距离', this.scrollViewHeight);
			}).exec();



		},
		methods: {
			
			// 点击全选按键
			selectAllClick(){
				this.selectAll=!this.selectAll
				
				this.listData.forEach((item,index)=>{
					
					
					if(this.selectAll){
						item.select=true
					}else{
						item.select=false
					}
					
				})
				
			},

			// 点击子项事件
			clickItem(item, index) {

				this.deviceSelectNum=0
				this.listData.forEach((item, itemIndex) => {

					if (index == itemIndex) {
						item.select = !item.select
					}
					
					if (item.select == true) {
						this.deviceSelectNum = this.deviceSelectNum + 1
					}

				})
				
				if (this.listData.length == this.deviceSelectNum) {
					this.selectAll = true;
				} else {
					this.selectAll = false;
				}
				
				

			},
			// 获取输入框的值
			getInputValue(e) {
				console.log('获取输入框的值', e);
			},

		}
	}
</script>

<style>
	.contentAll{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 40rpx;
		width: 100%;
		margin-top: 30rpx;
		
	}
	.ContentButton {
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;

		display: flex;

		position: absolute;
		bottom: 30rpx;

		align-items: center;
		justify-content: center;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 30rpx;

	}

	.contentListItemRightImg {
		display: flex;
		width: 36rpx;
		height: 36rpx;
		margin-right: 30rpx;
	}

	.contentListItemRight {
		display: flex;
	}

	.contentListItemLeftText {
		display: flex;
		align-items: center;

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 120rpx;
	}

	.contentListItemLeftImgSecond {
		display: flex;
		width: 58rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}

	.contentListItemLeftImgText {
		display: flex;
		width: 30rpx;
		height: 30rpx;

		border-radius: 50%;
		border: 2px solid #999999;

		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.contentListItemLeftImg {
		display: flex;
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.contentListItemLeft {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.contentListItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120rpx;
		border-bottom: #eee;
		width: 100%;

	}

	.contentScroll {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;


		width: 690rpx;
		height: 800rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.contentList {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;



	}
</style>